import React, { useState } from 'react'
import { useIntl } from "react-intl";
import { useTheme } from '@mui/material/styles';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';
import Paper from '@mui/material/Paper';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
import MuiAccordion, { AccordionProps } from '@mui/material/Accordion';
import MuiAccordionSummary, { AccordionSummaryProps } from '@mui/material/AccordionSummary';
import MuiAccordionDetails from '@mui/material/AccordionDetails';
import Stack from '@mui/material/Stack';
import { Dialog, DialogTitle, DialogContent, Divider, Typography } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import Link from '@mui/material/Link';
import Slider from '@mui/material/Slider';
import Image from 'next/image';
import Button from '@mui/material/Button';

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
import DeleteIcon from '@mui/icons-material/Delete';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import CloseIcon from '@mui/icons-material/Close';
import SettingsIcon from '@mui/icons-material/Settings';

import DKSKeyStyles from './DKSKey.module.css'
import DKSKey from './DKSKey';
import MTKeyStyles from './MTKey.module.css'
import MTKey from './MTKey';
import TGLKeyStyles from './TGLKey.module.css'
import TGLKey from './TGLKey';
import { KEYCODE_DICT } from '@/types/VkCodeDict';
import BaseKey from '@/components/key/BaseKey';

const baseKeyboardData: Array<API.Keyboard.KeyObject> = [
  { vkCode: KEYCODE_DICT.VK_A, keyText: "A" },
  { vkCode: KEYCODE_DICT.VK_B, keyText: "B" },
  { vkCode: KEYCODE_DICT.VK_C, keyText: "C" },
  { vkCode: KEYCODE_DICT.VK_D, keyText: "D" },
  { vkCode: KEYCODE_DICT.VK_E, keyText: "E" },
  { vkCode: KEYCODE_DICT.VK_F, keyText: "F" },
  { vkCode: KEYCODE_DICT.VK_G, keyText: "G" },
  { vkCode: KEYCODE_DICT.VK_H, keyText: "H" },
  { vkCode: KEYCODE_DICT.VK_I, keyText: "I" },
  { vkCode: KEYCODE_DICT.VK_J, keyText: "J" },
  { vkCode: KEYCODE_DICT.VK_K, keyText: "K" },
  { vkCode: KEYCODE_DICT.VK_L, keyText: "L" },
  { vkCode: KEYCODE_DICT.VK_M, keyText: "M" },
  { vkCode: KEYCODE_DICT.VK_N, keyText: "N" },
  { vkCode: KEYCODE_DICT.VK_O, keyText: "O" },
  { vkCode: KEYCODE_DICT.VK_P, keyText: "P" },
  { vkCode: KEYCODE_DICT.VK_Q, keyText: "Q" },
  { vkCode: KEYCODE_DICT.VK_R, keyText: "R" },
  { vkCode: KEYCODE_DICT.VK_S, keyText: "S" },
  { vkCode: KEYCODE_DICT.VK_T, keyText: "T" },
  { vkCode: KEYCODE_DICT.VK_U, keyText: "U" },
  { vkCode: KEYCODE_DICT.VK_V, keyText: "V" },
  { vkCode: KEYCODE_DICT.VK_W, keyText: "W" },
  { vkCode: KEYCODE_DICT.VK_X, keyText: "X" },
  { vkCode: KEYCODE_DICT.VK_Y, keyText: "Y" },
  { vkCode: KEYCODE_DICT.VK_Z, keyText: "Z" },
  { vkCode: KEYCODE_DICT.VK_1, keyText: "1" },
  { vkCode: KEYCODE_DICT.VK_2, keyText: "2" },
  { vkCode: KEYCODE_DICT.VK_3, keyText: "3" },
  { vkCode: KEYCODE_DICT.VK_4, keyText: "4" },
  { vkCode: KEYCODE_DICT.VK_5, keyText: "5" },
  { vkCode: KEYCODE_DICT.VK_6, keyText: "6" },
  { vkCode: KEYCODE_DICT.VK_7, keyText: "7" },
  { vkCode: KEYCODE_DICT.VK_8, keyText: "8" },
  { vkCode: KEYCODE_DICT.VK_9, keyText: "9" },
  { vkCode: KEYCODE_DICT.VK_0, keyText: "0" },
  { vkCode: KEYCODE_DICT.VK_OEM_MINUS, keyText: "-" },
  { vkCode: KEYCODE_DICT.VK_OEM_PLUS, keyText: "=" },
  { vkCode: KEYCODE_DICT.VK_OEM_4, keyText: "[" },
  { vkCode: KEYCODE_DICT.VK_OEM_6, keyText: "]" },
  { vkCode: KEYCODE_DICT.VK_OEM_102, keyText: "\\" },
  { vkCode: KEYCODE_DICT.VK_OEM_1, keyText: ";" },
  { vkCode: KEYCODE_DICT.VK_OEM_7, keyText: "\'" },
  { vkCode: KEYCODE_DICT.VK_OEM_COMMA, keyText: "," },
  { vkCode: KEYCODE_DICT.VK_OEM_PERIOD, keyText: "." },
  { vkCode: KEYCODE_DICT.VK_OEM_2, keyText: "/" }
]
const extendKeyboardData: Array<API.Keyboard.KeyObject> = [
  { vkCode: KEYCODE_DICT.VK_ESCAPE, keyText: "Esc" },
  { vkCode: KEYCODE_DICT.VK_TAB, keyText: "Tab" },
  { vkCode: KEYCODE_DICT.VK_CAPITAL, keyText: "Caps" },
  { vkCode: KEYCODE_DICT.VK_BACK, keyText: "Back Space" },
  { vkCode: KEYCODE_DICT.VK_RETURN, keyText: "Enter" },
  { vkCode: KEYCODE_DICT.VK_SPACE, keyText: "Space" },
  { vkCode: KEYCODE_DICT.VK_LCONTROL, keyText: "Left\nCtrl" },
  { vkCode: KEYCODE_DICT.VK_RCONTROL, keyText: "Right\nCtrl" },
  { vkCode: KEYCODE_DICT.VK_LSHIFT, keyText: "Left\nShift" },
  { vkCode: KEYCODE_DICT.VK_RSHIFT, keyText: "Rightj\nShift" },
  { vkCode: KEYCODE_DICT.VK_LMENU, keyText: "Left\nAlt" },
  { vkCode: KEYCODE_DICT.VK_RMENU, keyText: "Right\nALt" },
  { vkCode: KEYCODE_DICT.VK_LWIN, keyText: "Left\nOS" },
  { vkCode: KEYCODE_DICT.VK_RWIN, keyText: "Right\nOS" },
  { vkCode: KEYCODE_DICT.VK_UP, keyText: "Up" },
  { vkCode: KEYCODE_DICT.VK_DOWN, keyText: "Down" },
  { vkCode: KEYCODE_DICT.VK_LEFT, keyText: "Left" },
  { vkCode: KEYCODE_DICT.VK_RIGHT, keyText: "Right" },
  { vkCode: KEYCODE_DICT.VK_PRINT, keyText: "Print\nScreen" },
  { vkCode: KEYCODE_DICT.VK_SCROLL, keyText: "Scroll\nLock" },
  { vkCode: KEYCODE_DICT.VK_PAUSE, keyText: "Pause" },
  { vkCode: KEYCODE_DICT.VK_HOME, keyText: "Home" },
  { vkCode: KEYCODE_DICT.VK_END, keyText: "End" },
  { vkCode: KEYCODE_DICT.VK_INSERT, keyText: "Insert" },
  { vkCode: KEYCODE_DICT.VK_DELETE, keyText: "Delete" },
  { vkCode: KEYCODE_DICT.VK_PRIOR, keyText: "Page\nUp" },
  { vkCode: KEYCODE_DICT.VK_NEXT, keyText: "Page\nDown" },
  { vkCode: KEYCODE_DICT.VK_F1, keyText: "F1" },
  { vkCode: KEYCODE_DICT.VK_F2, keyText: "F2" },
  { vkCode: KEYCODE_DICT.VK_F3, keyText: "F3" },
  { vkCode: KEYCODE_DICT.VK_F4, keyText: "F4" },
  { vkCode: KEYCODE_DICT.VK_F5, keyText: "F5" },
  { vkCode: KEYCODE_DICT.VK_F7, keyText: "F7" },
  { vkCode: KEYCODE_DICT.VK_F8, keyText: "F8" },
  { vkCode: KEYCODE_DICT.VK_F9, keyText: "F9" },
  { vkCode: KEYCODE_DICT.VK_F10, keyText: "F10" },
  { vkCode: KEYCODE_DICT.VK_F11, keyText: "F11" },
  { vkCode: KEYCODE_DICT.VK_F12, keyText: "F12" },
  { vkCode: KEYCODE_DICT.VK_F13, keyText: "F13" },
  { vkCode: KEYCODE_DICT.VK_F14, keyText: "F14" },
  { vkCode: KEYCODE_DICT.VK_F15, keyText: "F15" },
  { vkCode: KEYCODE_DICT.VK_F16, keyText: "F16" },
  { vkCode: KEYCODE_DICT.VK_F17, keyText: "F17" },
  { vkCode: KEYCODE_DICT.VK_F18, keyText: "F18" },
  { vkCode: KEYCODE_DICT.VK_F19, keyText: "F19" },
  { vkCode: KEYCODE_DICT.VK_F20, keyText: "F20" },
  { vkCode: KEYCODE_DICT.VK_F21, keyText: "F21" },
  { vkCode: KEYCODE_DICT.VK_F22, keyText: "F22" },
  { vkCode: KEYCODE_DICT.VK_F23, keyText: "F23" },
  { vkCode: KEYCODE_DICT.VK_F24, keyText: "F24" },
  { vkCode: KEYCODE_DICT.VK_NUMLOCK, keyText: "Num\nLock" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD1, keyText: "Num1" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD2, keyText: "Num2" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD3, keyText: "Num3" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD4, keyText: "Num4" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD5, keyText: "Num5" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD6, keyText: "Num6" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD7, keyText: "Num7" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD8, keyText: "Num8" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD9, keyText: "Num9" },
  { vkCode: KEYCODE_DICT.VK_NUMPAD0, keyText: "Num0" },
  { vkCode: KEYCODE_DICT.VK_DIVIDE, keyText: "Num/" },
  { vkCode: KEYCODE_DICT.VK_DECIMAL, keyText: "Num." },
  { vkCode: KEYCODE_DICT.VK_MULTIPLY, keyText: "Num*" },
  { vkCode: KEYCODE_DICT.VK_SUBTRACT, keyText: "Num-" },
  { vkCode: KEYCODE_DICT.VK_ADD, keyText: "Num+" },
  { vkCode: KEYCODE_DICT.VK_SEPARATOR, keyText: "Enter" }
]
const specialKeyboardData: Array<API.Keyboard.KeyObject> = [
  { vkCode: KEYCODE_DICT.VK_RGB_SWITH, keyText: "RGB\nSwitch" },
  { vkCode: KEYCODE_DICT.VK_RGB_Effect, keyText: "RGB\nEffet" },
  { vkCode: KEYCODE_DICT.VK_RGB_Color, keyText: "RGB\nColor" },
  { vkCode: KEYCODE_DICT.VK_RGB_BRIGHT1, keyText: "RGB\nBright+" },
  { vkCode: KEYCODE_DICT.VK_RGB_BRIGHT0, keyText: "RGB\nBright-" },
  { vkCode: KEYCODE_DICT.VK_RGB_SPEED1, keyText: "RGB\nSpeed+" },
  { vkCode: KEYCODE_DICT.VK_RGB_SPEED0, keyText: "RGB\nSpeed-" },
]

const Accordion = styled((props: AccordionProps) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  '&:not(:last-child)': {
    borderBottom: 0,
  },
  '&::before': {
    display: 'none',
  },
}));

const AccordionSummary = styled((props: AccordionSummaryProps) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor:
    theme.palette.mode === 'dark'
      ? 'rgba(255, 255, 255, .05)'
      : 'rgba(0, 0, 0, .03)',
  flexDirection: 'row-reverse',
  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
    transform: 'rotate(90deg)',
  },
  '& .MuiAccordionSummary-content': {
    marginLeft: theme.spacing(1),
  },
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(1),
  borderTop: '1px solid rgba(0, 0, 0, .125)',
}));

interface AdvancedKeyProps {
  advancedKey: API.Keyboard.AdvancedKey,
  onDelete: (advancedKey: API.Keyboard.AdvancedKey) => void,
  onConfirm: (advancedKey: API.Keyboard.AdvancedKey, isClose: boolean) => void,
}

const AdvancedKey: React.FC<AdvancedKeyProps> = (props) => {
  const intl = useIntl()
  const theme = useTheme()
  const isDarkMode = theme.palette.mode === 'dark';
  const panel = props.advancedKey.type
  let title = intl.formatMessage({ id: "advance.DKSTitle" })
  if (props.advancedKey.type === 'MT') {
    title = intl.formatMessage({ id: "advance.MTTitle" })
  } else if (props.advancedKey.type === 'TGL') {
    title = intl.formatMessage({ id: "advance.LGTTitle" })
  }

  const [selected, setSelected] = useState(-1)
  const [openDksTriggerPos, setOpenTriggerPos] = useState(false)
  const [triggerPos, setTriggerPos] = useState<number>()
  const [openPressTime, setOpenPressTime] = useState(false)
  const [pressTime, setPressTime] = useState(props.advancedKey.pressTime)


  const handleChangeDksKey = (num: number, vkCode: number | undefined, keyText: string) => {
    const newAdvancedKey = props.advancedKey
    if (newAdvancedKey.dks) {
      newAdvancedKey.dks[num].vkCode = vkCode
      newAdvancedKey.dks[num].keyText = keyText
      props.onConfirm(newAdvancedKey, false)
    }
  }
  const handleChangeDksData = (num: number, dksData: Array<API.Keyboard.DKSData>) => {
    const newAdvancedKey = props.advancedKey
    if (newAdvancedKey.dks) {
      newAdvancedKey.dks[num].data = dksData
      props.onConfirm(newAdvancedKey, false)
    }

  }
  const handleChangeMtKey = (num: number, mtKey: API.Keyboard.MTKey) => {
    const newAdvancedKey = props.advancedKey
    if (newAdvancedKey.mt) {
      newAdvancedKey.mt[num] = mtKey
      props.onConfirm(newAdvancedKey, false)
    }
  }
  const handleChangePressTime = (event: Event, newValue: number | number[]) => {
    setPressTime(newValue as number)
  }
  const handleChangeTglKey = (tglKey: API.Keyboard.TGLKey) => {
    const newAdvancedKey = props.advancedKey
    newAdvancedKey.tgl = tglKey
    props.onConfirm(newAdvancedKey, false)
  }
  const handleClickBaseKey = (keyObj: API.Keyboard.KeyObject) => {
    const newAdvancedKey = props.advancedKey
    switch (selected) {
      case 0:
        if (newAdvancedKey.dks) {
          newAdvancedKey.dks[0].vkCode = keyObj.vkCode
          newAdvancedKey.dks[0].keyText = keyObj.keyText
        }
        break;
      case 1:
        if (newAdvancedKey.dks) {
          newAdvancedKey.dks[1].vkCode = keyObj.vkCode
          newAdvancedKey.dks[1].keyText = keyObj.keyText
        }
        break;
      case 2:
        if (newAdvancedKey.dks) {
          newAdvancedKey.dks[2].vkCode = keyObj.vkCode
          newAdvancedKey.dks[2].keyText = keyObj.keyText
        }
        break;
      case 3:
        if (newAdvancedKey.dks) {
          newAdvancedKey.dks[3].vkCode = keyObj.vkCode
          newAdvancedKey.dks[3].keyText = keyObj.keyText
        }
        break;
      case 4:
        if (newAdvancedKey.mt) {
          newAdvancedKey.mt[0] = keyObj
        }
        break;
      case 5:
        if (newAdvancedKey.mt) {
          newAdvancedKey.mt[1] = keyObj
        }
        break;
      case 6:
        newAdvancedKey.tgl = keyObj
        break;
      default:
    }
    props.onConfirm(newAdvancedKey, false)
    handleDragStart()
  }
  const handleDragStart = () => {
    setSelected(-1)
    const dksKeyItems = document.getElementsByClassName("DKS_KEY_ITEM");
    for (let i = 0; i < dksKeyItems.length; i++) {
      dksKeyItems[i].classList.remove(DKSKeyStyles.selected_key)
    }
    const mtKeyItems = document.getElementsByClassName("MT_KEY_ITEM");
    for (let i = 0; i < mtKeyItems.length; i++) {
      mtKeyItems[i].classList.remove(MTKeyStyles.selected_key)
    }
    const tglKeyItems = document.getElementsByClassName("TGL_KEY_ITEM");
    for (let i = 0; i < tglKeyItems.length; i++) {
      tglKeyItems[i].classList.remove(TGLKeyStyles.selected_key)
    }
  }
  const onSelect = (selected: number) => {
    setSelected(selected)
  }
  const handleDelete = () => {
    props.onDelete(props.advancedKey)
  }
  const handleConfirm = () => {
    props.onConfirm(props.advancedKey, true)
  }
  const handleCloseDksTriggerPos = () => {
    setOpenTriggerPos(false)
  }
  const handleChangeTriggerPos = (_: Event, newValue: number | number[]) => {
    setTriggerPos(newValue as number)
    const newAdvancedKey = props.advancedKey
    if (newAdvancedKey.dks) {
      newAdvancedKey.fitstTriggerPos = newValue as number
      newAdvancedKey.lastTriggerPos = newValue as number
      props.onConfirm(newAdvancedKey, false)
    }
  };
  const handleOpenPressTime = () => {
    setPressTime(props.advancedKey.pressTime || 200)
    setOpenPressTime(true)
  }
  const handleClosePressTime = () => {
    setOpenPressTime(false)
  }
  const handleConfirmPressTime = () => {
    const newAdvancedKey = props.advancedKey
    newAdvancedKey.pressTime = pressTime
    props.onConfirm(newAdvancedKey, false)
    handleClosePressTime()
  }


  return (
    <>
      <Paper elevation={0} variant="outlined"
        sx={{
          minWidth: '958px',
          p: 1,
          borderRadius: '10px',
          height: '420px',
          flexGrow: 1,
          backgroundColor: isDarkMode ? '#20232a' : '#fff'
        }}
      >
        <Stack direction={'row'} justifyContent={'space-between'}>
          <Stack direction='row' alignItems={'center'} spacing={0}>
            <Typography variant='body1'>{title}</Typography>
            {panel === 'MT' &&
              <IconButton size='small' onClick={handleOpenPressTime}>
                <SettingsIcon fontSize="small" />
              </IconButton>
            }
          </Stack>
          <Stack direction='row'>
            <IconButton aria-label="delete" size='small' onClick={handleDelete}>
              <DeleteIcon fontSize="small" />
            </IconButton>
            <Divider orientation="vertical" variant="middle" flexItem />
            <IconButton aria-label="done" size='small' color='success' onClick={handleConfirm}>
              <CheckCircleIcon fontSize="small" />
            </IconButton>
          </Stack>
        </Stack>
        <Divider></Divider>
        <Grid container spacing={2} sx={{ mt: '5px' }}>
          <Grid xs={4}>
            <Box
              sx={{
                p: 1,
                height: '350px',
                border: '1px solid',
                borderColor: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
                borderRadius: '10px',
                backgroundColor: isDarkMode ? '#20232a' : '#fff',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'cente'
              }}
            >
              {panel === 'DKS' &&
                <Stack spacing={2.5}>
                  <Box sx={{ pl: '69px' }}>
                    <Stack direction="row" >
                      <Stack spacing={1} alignItems={'center'} sx={{ mr: '28px' }}>
                        <Link color="inherit" sx={{ fontSize: '12px' }}>
                          {props.advancedKey.fitstTriggerPos || 1.6}mm
                        </Link>
                        <Box sx={{ width: '32px', height: '32px', border: '1px solid ', borderRadius: '5px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                          <VerticalAlignTopIcon fontSize="small" />
                        </Box>
                      </Stack>
                      <Stack spacing={1} alignItems={'center'} sx={{ mr: '28px' }}>
                        <Typography variant="caption" fontSize={12}>3.6mm</Typography>
                        <Box sx={{ width: '32px', height: '32px', border: '1px solid ', borderRadius: '5px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                          <VerticalAlignTopIcon fontSize="small" />
                        </Box>
                      </Stack>
                      <Stack spacing={1} alignItems={'center'} sx={{ mr: '28px' }}>
                        <Typography variant="caption" fontSize={12}>3.6mm</Typography>
                        <Box sx={{ width: '32px', height: '32px', border: '1px solid ', borderRadius: '5px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                          <VerticalAlignTopIcon fontSize="small" />
                        </Box>
                      </Stack>
                      <Stack spacing={1} alignItems={'center'}>
                        <Link color="inherit" sx={{ fontSize: '12px' }}>
                          {props.advancedKey.lastTriggerPos || 1.6}mm
                        </Link>
                        <Box sx={{ width: '32px', height: '32px', border: '1px solid ', borderRadius: '5px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                          <VerticalAlignTopIcon fontSize="small" />
                        </Box>
                      </Stack>
                    </Stack>
                  </Box>
                  {props.advancedKey.dks &&
                    <>
                      <DKSKey
                        dksKey={props.advancedKey.dks[0]}
                        onClick={() => onSelect(0)}
                        onChangeKey={(vkCode, keyText) => handleChangeDksKey(0, vkCode, keyText)}
                        onChangeData={(dksData) => handleChangeDksData(0, dksData)}
                      />
                      <DKSKey
                        onClick={() => onSelect(1)}
                        dksKey={props.advancedKey.dks[1]}
                        onChangeKey={(vkCode, keyText) => handleChangeDksKey(1, vkCode, keyText)}
                        onChangeData={(dksData) => handleChangeDksData(1, dksData)}
                      />
                      <DKSKey
                        onClick={() => onSelect(2)}
                        dksKey={props.advancedKey.dks[2]}
                        onChangeKey={(vkCode, keyText) => handleChangeDksKey(2, vkCode, keyText)}
                        onChangeData={(dksData) => handleChangeDksData(2, dksData)}
                      />
                      <DKSKey
                        onClick={() => onSelect(3)}
                        dksKey={props.advancedKey.dks[3]}
                        onChangeKey={(vkCode, keyText) => handleChangeDksKey(3, vkCode, keyText)}
                        onChangeData={(dksData) => handleChangeDksData(3, dksData)}
                      />
                    </>
                  }
                </Stack>
              }

              {panel === 'MT' &&
                <Stack spacing={2} alignItems={'center'}  >
                  <Typography variant="body2" display="block" gutterBottom sx={{ p: 1 }}>
                    {intl.formatMessage({ id: "advance.MTExplain" })}
                  </Typography>
                  <Stack direction="row" spacing={5} >
                    <Stack alignItems={'center'}>
                      <Typography variant='caption'>{intl.formatMessage({ id: "advance.press" })}</Typography>
                      {props.advancedKey.mt &&
                        <MTKey mtKey={props.advancedKey.mt[0]} onChangeKey={(mtData) => handleChangeMtKey(0, mtData)} onClick={() => onSelect(4)} />
                      }
                    </Stack>
                    <Stack alignItems={'center'}>
                      <Typography variant='caption'>{intl.formatMessage({ id: "advance.click" })}</Typography>
                      {props.advancedKey.mt &&
                        <MTKey mtKey={props.advancedKey.mt[1]} onChangeKey={(mtData) => handleChangeMtKey(1, mtData)} onClick={() => onSelect(5)} />
                      }
                    </Stack>
                  </Stack>
                  <Typography variant='caption'>{intl.formatMessage({ id: 'advance.pressTimeTips' })}：{props.advancedKey.pressTime}ms</Typography>
                </Stack>
              }

              {panel === 'TGL' &&
                <Stack spacing={2} alignItems={'center'}  >
                  <Typography variant="caption" display="block" gutterBottom sx={{ p: 1 }}>
                    {intl.formatMessage({ id: "advance.LGTExplain" })}
                  </Typography>
                  <TGLKey tglKey={props.advancedKey.tgl} onChangeKey={(tglKey) => handleChangeTglKey(tglKey)} onClick={() => onSelect(6)} />
                </Stack>
              }

            </Box>
          </Grid>

          <Grid xs={8}>
            <Box
              sx={{
                p: 1,
                height: '350px',
                border: '1px solid',
                borderColor: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
                borderRadius: '10px',
                backgroundColor: isDarkMode ? '#20232a' : '#fff',
                overflow: 'auto'
              }}
            >
              <Accordion defaultExpanded sx={{ backgroundColor: isDarkMode ? '#20232a' : '#fff' }}>
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="baseKey-content"
                  id="baseKey-header"
                  sx={{ backgroundColor: isDarkMode ? '#262931' : '#eaecef' }}
                >
                  <Typography variant='caption'>{intl.formatMessage({ id: "advance.baseKeyPanel" })}</Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Box>
                    {baseKeyboardData.map((item) => {
                      return <BaseKey key={'baseKey_' + item.vkCode} keyObj={item} onClick={handleClickBaseKey} onDragStart={handleDragStart} />
                    })}
                  </Box>
                </AccordionDetails>
              </Accordion>
              <Accordion sx={{ backgroundColor: isDarkMode ? '#20232a' : '#fff' }}>
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="extendKey-content"
                  id="extendKey-header"
                  sx={{ backgroundColor: isDarkMode ? '#262931' : '#eaecef' }}
                >
                  <Typography variant='caption'>{intl.formatMessage({ id: "advance.extendKeyPanel" })}</Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Box>
                    {extendKeyboardData.map((item) => {
                      return <BaseKey key={'extendKey_' + item.vkCode} keyObj={item} onClick={handleClickBaseKey} onDragStart={handleDragStart} />
                    })}
                  </Box>
                </AccordionDetails>
              </Accordion>
              <Accordion sx={{ backgroundColor: isDarkMode ? '#20232a' : '#fff' }}>
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls="specialKey-content"
                  id="specialKey-header"
                  sx={{ backgroundColor: isDarkMode ? '#262931' : '#eaecef' }}
                >
                  <Typography variant='caption'>{intl.formatMessage({ id: "advance.specialKeyPanel" })}</Typography>
                </AccordionSummary>
                <AccordionDetails>
                  <Box>
                    {specialKeyboardData.map((item) => {
                      return <BaseKey key={'specialKey_' + item.vkCode} keyObj={item} onClick={handleClickBaseKey} onDragStart={handleDragStart} />
                    })}
                  </Box>
                </AccordionDetails>
              </Accordion>
            </Box>
          </Grid>
        </Grid>

        <Dialog open={openDksTriggerPos} >
          <Box sx={{ backgroundColor: '#20232a' }} >
            <Box sx={{ width: '350px', textAlign: 'center' }}>
              <Typography variant='caption' >{intl.formatMessage({ id: "advance.triggerPosExplain" })}</Typography>
              <IconButton aria-label="delete" size="small" onClick={handleCloseDksTriggerPos} sx={{ position: 'absolute', right: '0px' }}>
                <CloseIcon fontSize="inherit" />
              </IconButton>
            </Box>
            <Box sx={{ width: '350px', height: '200px' }} >
              <Stack justifyContent={'center'} alignItems={'center'}>
                <Image
                  priority
                  src="/images/ks.png"
                  height={120}
                  width={120}
                  alt=""
                />
                <Box sx={{ width: 250 }}>
                  <Slider
                    step={0.1}
                    value={triggerPos}
                    valueLabelDisplay="auto"
                    color='warning'
                    min={0.1}
                    max={4}
                    onChange={handleChangeTriggerPos}
                  />
                  <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Typography
                      variant="caption"
                      onClick={() => setTriggerPos(1)}
                      sx={{ cursor: 'pointer' }}
                    >
                      0.1mm
                    </Typography>
                    <Typography
                      variant="caption"
                      onClick={() => setTriggerPos(40)}
                      sx={{ cursor: 'pointer' }}
                    >
                      4mm
                    </Typography>
                  </Box>
                </Box>
              </Stack>
            </Box>
          </Box>
        </Dialog>
      </Paper>

      <Dialog open={openPressTime}>
        <Box sx={{ width: '350px', textAlign: 'center' }}>
          <Typography variant='caption' ></Typography>
          <IconButton aria-label="delete" size="small" onClick={handleClosePressTime} sx={{ position: 'absolute', right: '0px' }}>
            <CloseIcon fontSize="inherit" />
          </IconButton>
        </Box>
        <DialogTitle sx={{ backgroundColor: isDarkMode ? '#20232a' : '#fff' }}>{intl.formatMessage({ id: 'advance.pressTimeTitle' })}</DialogTitle>
        <DialogContent sx={{ backgroundColor: isDarkMode ? '#20232a' : '#fff' }}>
          <Box width={'100%'}>
            <Typography variant="body2">{intl.formatMessage({ id: 'advance.pressTimeTips' })}</Typography>
            <Stack pl={'10px'} pr={'10px'} direction={'row'} spacing={2} alignItems={'center'}>
              <Slider
                aria-label="pressTime"
                max={1000}
                min={10}
                step={1}
                value={pressTime}
                onChange={handleChangePressTime}
              />
              <Typography variant="body2" width={'60px'}>{pressTime}ms</Typography>
            </Stack>
            <Typography variant='caption'>{intl.formatMessage({ id: 'advance.pressTimeExplain' })}</Typography>
          </Box>
          <br></br>
          <Box>
            <Button fullWidth variant="contained" onClick={handleConfirmPressTime}>{intl.formatMessage({ id: 'page.confirm' })}</Button>
          </Box>

        </DialogContent>
      </Dialog>
    </>
  )
}

export default AdvancedKey;